<template>
  <el-row>
    <el-form :model="queryParams" ref="queryForm" :inline="true" size="default">
      <el-form-item label="" prop="customerName">
        <el-input v-model="queryParams.customerName" placeholder="请输入客户姓名" class="large-search-input">
          <template #append>
            <el-button icon="Search" @click="queryList" class="large-search-button" />
          </template>
        </el-input>
      </el-form-item>
    </el-form>

    <el-col :span="1.5" class="divider">
      <el-button class="insertButton" type="primary" icon="Plus" size="default" @click="insertEdit">添加客户喜好</el-button>
    </el-col>
  </el-row>

  <div>
    <el-divider>
      <el-icon>
        <OfficeBuilding />
      </el-icon>
    </el-divider>
  </div>

  <el-row v-loading="loading">
    <el-table :data="tableData" size="default">
      <el-table-column prop="preId" label="序号" type="index" width="60" align="center" />
      <!-- <el-table-column prop="id" label="用户编号" align="center" /> -->
      <el-table-column prop="customerName" label="客户姓名" width="80px" align="center" />
      <el-table-column prop="customerAge" label="客户年龄" width="80px" align="center" />
      <el-table-column prop="customerSex" label="客户性别" width="80px" align="center" />
      <el-table-column prop="buildingNo" label="所属楼号" width="80px" align="center" />
      <el-table-column prop="roomNo" label="房间号" width="70px" align="center" />
      <el-table-column prop="bedId" label="床位号" width="70px" align="center" />
      <el-table-column prop="psychosomaticState" label="身体状况" width="140px" align="center" />
      <el-table-column prop="preferences" label="客户喜好" width="190px" align="center" />
      <el-table-column prop="attention" label="注意事项" width="190px" align="center" />
      <el-table-column prop="remark" label="备注" width="190px" align="center" />
      <el-table-column fixed="right" label="操作" align="center" min-width="180px">
        <template #default="scope">
          <el-button type="primary" size="small" icon="Edit" round
                     @click="updateEdit(scope.row)">修改</el-button>
          <el-button type="danger" size="small" icon="Delete" round
                     @click="deleteUser(scope.row.preId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 20px;" layout="sizes, prev, pager, next, jumper, ->, total"
                   :total="queryParams.total" v-model:page-size="queryParams.size" v-model:current-page="queryParams.current"
                   @current-change="queryList" @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20]" />
  </el-row>

  <!-- 添加对话框 -->
  <el-dialog v-model="showInsertDialog" title="添加客户喜好" width="460px">
    <EditInsert v-if="showInsertDialog" :closeEdit="closeEdit" :customerList="customerPreList" />
  </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog v-model="showUpdateDialog" title="修改客户喜好" width="460px">
    <EditUpdate v-if="showUpdateDialog" :closeEdit="closeEdit" :currentRow="currentEditRow" />
  </el-dialog>
</template>

<script setup name="checkIn">
import { ref, onMounted } from 'vue'
import EditInsert from './editInsert.vue'
import EditUpdate from './editUpdate.vue'
import { removeById, selectWithCustomer, getCustomersPreference } from '@/api/customer/customerpreference/index.js'
import { ElMessageBox, ElNotification } from 'element-plus'

const loading = ref(true)
const tableData = ref([])
// 存未添加客户喜好的客户列表
const customerPreList = ref([])
const currentEditRow = ref(null)

const queryParams = ref({
  customerName: '',
  current: 1,
  size: 5,
  total: 0
})

const showInsertDialog = ref(false)
const showUpdateDialog = ref(false)

// 查询客户喜好信息
async function queryList() {
  loading.value = true
  try {
    const page = await selectWithCustomer(queryParams.value)
    tableData.value = page.records
    queryParams.value.total = page.total

    // console.log("tableData:", tableData.value);
  } catch (e) {
    console.error("查询失败:", e)
  } finally {
    loading.value = false
  }
}

// 获取没有喜好记录的客户列表
async function getAllCustomers() {
  loading.value = true
  try {
    // 修改为调用没有喜好记录的接口
    const response = await getCustomersPreference()
    customerPreList.value = response  // response 在utils/request.js 中已经被解构 不需要使用response.data

    // console.log("customerPreList:", customerPreList.value);
  } catch (e) {
    console.error("查询失败:", e)
  } finally {
    loading.value = false
  }
}
// 关闭子组件
const closeEdit = (query) => {
  showInsertDialog.value = false
  showUpdateDialog.value = false
  if (query) {
    queryList()
    getAllCustomers()
  }
}
// 添加客户喜好组件
const insertEdit = () => {
  showInsertDialog.value = true
}
// 修改客户喜好组件
const updateEdit = (row) => {
  currentEditRow.value = row
  showUpdateDialog.value = true
}
// 删除客户喜
const deleteUser = (id) => {
  ElMessageBox.confirm('是否确认删除该客户喜好?', '警告', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    removeById(id).then(() => {
      ElNotification({
        title: '成功',
        type: 'success',
        message: "删除成功",
      })
      queryList()
    })
  })
}

onMounted(() => {
  queryList()
  getAllCustomers()
})
</script>

<style scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.insertButton {
  margin: 0px 0px 10px 0px;
}

.divider {
  margin: 0px 0px 10px 0px;
}
</style>